<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <h1>搜索记录：</h1>
    {{ searchValList }}
    {{ list }}
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapGetters, mapState } from 'vuex'
export default {
  data() {
    return {
      value: '',
      list: [],
      searchValList: [],
    }
  },
  watch: {
    value(v) {
      if (!v) {
        // 清空value值的时候，清空列表数据
        this.list = []
      }
    },
  },
  computed: {
    ...mapState(['bookList']),
  },
  methods: {
    onSearch(val) {
      const data = this.bookList.filter((v) => {
        if (v.bookName.includes(val)) {
          return v
        }
      })
      // 搜索记录
      this.searchValList.push(val)
      this.list = data
    },
    onCancel() {
      Toast('取消')
    },
  },
}
</script>

<style></style>
